import {} from 'antd-mobile'
import style from './index.module.less'
import {getCourtRequest} from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import { useEffect, useState } from 'react'
import { useAppSelector } from '@src/redux/hook'
import PageLoading from '@components/pageLoading'
import PersonItem from './components/personItem'
import PageEmpty from '@components/pageEmpty'

async function initData (caseDetail, uid, setLoading, setList) {
  setLoading(true)
  const [e, d] = await awaitWrap(getCourtRequest(caseDetail.id, caseDetail, uid))
  setLoading(false)
  if (e === null && d !== null) {
    setList(d)
  }
}

function Main ({ data }) {
  const userInfo = useAppSelector(state => state.basic.userInfo)
  const arbitratorVersion = useAppSelector(state => state.cases.arbitratorVersion)
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState([])
  useEffect(() => {
    if (data && userInfo) {
      initData(data, userInfo.id, setLoading, setList)
    }
  }, [data, userInfo, arbitratorVersion])
  if (loading) {
    return (
      <PageLoading />
    )
  }
  return (
    <div className={style.container}>
      {
        list.length === 0 && (
          <div>
            <PageEmpty />
          </div>
        )
      }
      {
        list.map((li, i) => <PersonItem data={li} caseid={data.id} index={i} key={i} />)
      }
    </div>
  )
}

export default Main
